<template>
  <div class="select-main">
    <popper ref="popper">
      <div class="popper" v-show="isShow">
        <slot></slot>
      </div>
      <div slot="reference" class="button" @click="show">{{s_value}}</div>
    </popper>
  </div>
</template>

<script>
import popper from 'vue-popperjs';
import { bus } from './bus.js'
export default {
  components: {
    popper
  },
  props: {
    value: {
      type: String
    }
  },
  data () {
    return {
      s_value: null,
      isShow: false
    }
  },
  mounted () {
    const popper = document.querySelector('.popper').parentNode
    bus.$on('select', (value) => {
      this.$emit('input', value)
      this.isShow = false
    })
  },
  methods: {
    show () {
      this.isShow = true
    }
  }
}
</script>

<style lang="scss">
.select-main{
.button{
  width: 200px;
  height: 30px;
  border: 1px solid gray;
}
.popper{
  width: 200px;
  background: white;
  border: 1px solid #e1e1e1;
  p{
    &:hover{
      background: #e1e1e1;
    }
  }
}
}
</style>